<template>
  <div>
    <div>
      <!-- tree组件内默认会使用数组里对象的label属性的值,作为每一行节点的内容去渲染,但是我们数据源里的对象name属性才是名字,所以用props配合lebel,告诉tree组件内,使用对象的name属性的值,作为每行节点渲染的内容
          :default-checked-keys="permIds"
      -->
      <el-tree
        ref="tree"
        :data="permissionList"
        :props="{label:'name'}"
        show-checkbox
        default-expand-all
        check-strictly
        node-key="id"
      />
    </div>

    <el-row
      class="footer"
      type="flex"
      justify="center"
    >
      <el-col :span="6">
        <el-button
          size="small"
          @click="cancelButton"
        >取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="setRolesBtn"
        >确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AssignPermission',
  props: {
    // 所有权限点的树形数据
    permissionList: {
      type: Array,
      default: () => []
    },
    // 此角色现有的权限点id值数组
    permIds: {
      type: Array,
      default: () => []
    }
    // roleId: {
    //   type: [Number, String],
    //   required: true
    // }
  },
  data() {
    return {}
  },
  watch: {
    permIds() {
      this.$refs.tree.setCheckedKeys(this.permIds)
    }
  },
  created() {
    // console.log(this.roleId)
  },
  methods: {
    // 取消按钮
    cancelButton() {
      // 方式1:普通的事件名
      // 方式2:update:props变量名->在父组件内的子组件标签上->变量名点sync
      // 方式3:input事件->父组件内子组件标签绑定v-model=控制状态的变量名
      // this.$emit('input', false)

      this.$emit('update:show', false)
    },

    // 设置权限按钮
    setRolesBtn() {
      // this.$refs.tree.getCheckedKeys():获取现在已选的key对应值形成的数组(权限点id组成的数组)
      this.$emit('addPerEV', this.$refs.tree.getCheckedKeys())
      this.$emit('input', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 30px;
}
</style>
